import React, {Component} from 'react';
import down from '../../assets/down.svg'
import search from '../../assets/search.svg'
import map from '../../assets/map.svg'
import './SearchBar.scss'
import {NavLink} from "react-router-dom";
import {getCurrentCity} from "../../utiles";


class SearchBar extends Component {
    state = {city: null};

    componentDidMount() {
        getCurrentCity().then(res => {
            // console.log(res);
            res = JSON.parse(res)
            this.setState({city: res.label});
        })
    }

    render() {
        const {city} = this.state;
        return (
            <div className={['search',this.props.className || ' '].join(' ')}>
                    <div className='city'>
                        <NavLink to='/citylist' className='link'>
                            <span>{city}</span>
                            <img src={down} alt=""/>
                        </NavLink>
                    </div>
                    <div className='item'>
                        <img src={search} alt=""/>
                        <input type="text" placeholder='请输入小区或地址'/>
                    </div>
                    <div className='map'>
                        <NavLink to='/map' className='link'>
                            <img src={map} alt=""/>
                        </NavLink>
                </div>

            </div>
        );
    }
}

export default SearchBar;
